#{extends 'main.html' /}
#{set title:'CoolSoft - Projects' /}<h2>All projects</h2>
<hr/>
<ul style="list-style:none">
    #{list items:projects, as:'project'}
    <li>
        <img class="img" src="/public/images/plus.gif" id='p_${project.name}' onclick ="javascript:swap('description_${project.name}','p_${project.name}');"/>&nbsp;&nbsp;<a href="@{Projects.showProject(project.getEntityId())}">${project.name}</a>
        <br/>
        <div id = "description_${project.name}" style="padding-left:5%">
            ${project.description}
        </div>
        <br/>
        <script>
            $().ready(function(){
                swap('description_${project.name}', 'p_${project.name}');
            });
        </script>
    </li>
    #{/list}
</ul>
<script>
    function swap(b, p){ //document.getElementById('b').disabled=true;
        document.getElementById(b).style.display = (document.getElementById(b).style.display == "none") ? "block" : "none";
        document.getElementById(p).src = (document.getElementById(b).style.display == "block") ? "/public/images/minus.gif" : "/public/images/plus.gif";
    }
</script>
